<template>
  <div style="height: 100%">
    <el-dialog
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :class="{ readonly: !hasChooseTemplate }"
      append-to-body
      title="选择实验记录模板"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
      :before-close="handleClose"
    >
      <div v-loading.lock="loading" class="base-content">
        <div class="basic-info">
          <el-table
            ref="tableData"
            class="filter unsetborder"
            :class="{ 'show-filter': showFilterRow }"
            :data="list"
            element-loading-text="Loading"
            fit
            height="250"
            highlight-current-row
            @selection-change="handleSelectionChange"
          >
            <el-table-column align="center">
              <template #header>
                <div class="filter-icon" title="筛选">
                  <SvgIcon
                    class-name="filter"
                    icon-class="filter"
                    @click="filterIconClick"
                  />
                </div>
              </template>
              <el-table-column width="50"></el-table-column>
            </el-table-column>
            <el-table-column v-if="!addState" type="selection" width="55">
            </el-table-column>
            <el-table-column label="序号" align="center">
              <el-table-column width="100" align="center">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="记录编号">
              <el-table-column prop="templateCode">
                <template #header>
                  <el-input
                    v-if="showFilterRow"
                    v-model="queryForm.templateCode"
                    @keyup.enter.native="onQuery"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="模板名称">
              <el-table-column prop="templateName">
                <template #header>
                  <el-input
                    v-if="showFilterRow"
                    v-model="queryForm.templateName"
                    @keyup.enter.native="onQuery"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
            <!-- <el-table-column label="样品类别">
              <el-table-column prop="sampleCategoryName">
                <template #header>
                  <el-input
                    v-if="showFilterRow"
                    v-model="queryForm.sampleCategoryName"
                    @keyup.enter.native="onQuery"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column> -->
            <el-table-column label="检测项目">
              <el-table-column prop="detectionItemName">
                <template #header>
                  <el-input
                    v-if="showFilterRow"
                    v-model="queryForm.detectionItemName"
                    @keyup.enter.native="onQuery"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="操作">
              <el-table-column>
                <template #header>
                  <div v-if="showFilterRow" class="search-operate">
                    <el-link type="primary" @click="onQuery">搜索</el-link>
                    <el-link @click="cancelForm">清空</el-link>
                  </div>
                </template>
                <template slot-scope="scope">
                  <div class="base-table-operation">
                    <el-link
                      v-if="addState"
                      size="mini"
                      type="primary"
                      @click="handleCite(scope.row, scope.$index)"
                      >编辑</el-link
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>

          <BasePagination
            v-if="!addState"
            :total="pagination.total"
            :current-page="pagination.pageIndex"
            :page-count="pagination.total"
            @changePage="changePage"
            @sizeChange="sizeChange"
          />
        </div>
        <ExperimentTemplateEdit
          ref="ExperimentTemplateEdit"
          :readonly="readonly"
          :dialog-form-visible.sync="dialogFormVisibleEdit"
        />
        <ExperimentTemplateRecordEdit
          v-if="hasChooseTemplate"
          ref="ExperimentTemplateRecordEdit"
          v-model="recordData"
          :use-interface-status.sync="useInterfaceStatus"
          :operate-type="operateType"
          :dialog-form-visible.sync="hasChooseTemplate"
          @callback="callback"
        />
      </div>
      <!-- <span slot="footer" class="base-dialog-footer">
        <el-button type="primary" @click="onSubmit">保 存</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>
<script>
import ExperimentTemplateRecordEdit from "@/ModuleEln/ModuleEln/views/ModuleEln/ExperimentTemplateRecord/ExperimentTemplateRecordEdit.vue";
import ExperimentTemplateEdit from "@/ModuleEln/ModuleEln/views/ModuleEln/ExperimentTemplate/ExperimentTemplateEdit.vue";
import { getList } from "@/ModuleEln/ModuleEln/api/Eln/ExperimentTemplate.js";
import { deepClone } from "../../utils";
export default {
  name: "TaskExperimentTemplateRecordEdit",
  components: {
    ExperimentTemplateEdit,
    ExperimentTemplateRecordEdit,
  },
  props: {
    experimentTemplateData: {
      type: Array,
      default: () => [],
    },
    paginationExperiment: {
      type: Object,
      default: function() {
        return {
          pageIndex: 1,
          pageSize: 10,
          total: 0,
        };
      },
    },
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    addState: {
      type: Boolean,
      default: false,
    },
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      operateType: 0,
      useInterfaceStatus: false,
      recordData: {},
      rowIndex: -1,
      readonly: false,
      innerDialogFormVisible: false,
      showFilterRow: false,
      hasChooseTemplate: false,
      loading: true,
      list: [],
      tables: [],
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      queryForm: {
        templateCode: undefined,
        templateName: undefined,
        sampleCategoryName: undefined,
        detectionItemName: undefined,
      },
      dialogFormVisibleEdit: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    this.pagination = this.paginationExperiment;
    if (this.addState) {
      this.list = this.tableData;
      this.loading = false;
    } else {
      this.getList();
    }
  },
  methods: {
    // 引用关闭
    callback(resetData, originalData) {
      this.list[this.rowIndex].resetData = {};
      this.list[this.rowIndex].resetData = resetData;
      this.list[this.rowIndex].originalData = [];
      this.list[this.rowIndex].originalData = originalData;
      this.list[this.rowIndex].originalData.testerId = [];
      this.list[this.rowIndex].originalData.testerId = originalData.creatorName;
      // this.list[this.rowIndex].
      this.dialogFormvisible = false;
      this.hasChooseTemplate = false;
      this.recordData = {};
      this.rowIndex = -1;
    },
    // 引用
    handleCite(rowData, index) {
      this.rowIndex = index;
      if (
        rowData.originalData !== null &&
        rowData.originalData !== undefined &&
        rowData.originalData.length !== 0
      ) {
        this.operateType = 1;
        rowData.originalData.creatorName = rowData.originalData.testId;
        this.recordData = rowData.originalData;
        this.hasChooseTemplate = true;
      } else {
        this.operateType = 0;
        this.recordData = deepClone(rowData);
        this.hasChooseTemplate = true;
      }
    },
    onSubmit() {
      if (!this.addState) {
        if (this.tables === null || this.tables.length === 0) {
          this.$message.error("请选择数据");
          return false;
        }
        this.$emit("closeAddDialog", this.tables, this.pagination);
        this.handleClose();
      } else {
        this.handleClose();
      }
    },
    handleSelectionChange(val) {
      this.tables = val;
    },
    handleClose() {
      this.innerDialogFormVisible = false;
      this.$emit("update:addState", false);
      this.$emit("update:experimentTemplateData", null);
      this.$emit("update:dialogFormVisible", false);
    },
    handleEdit(rowData, readonly) {
      this.$refs.ExperimentTemplateEdit.formData = deepClone(rowData);
      this.readonly = !!readonly;
      this.dialogFormVisibleEdit = true;
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.getList();
    },
    cancelForm() {
      this.queryForm = this.$options.data().queryForm;
    },
    filterIconClick() {
      this.showFilterRow = !this.showFilterRow;
      !this.showFilterRow && this.cancelForm();
    },
    getList() {
      this.loading = true;
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          if (
            this.experimentTemplateData !== null &&
            this.experimentTemplateData.length !== 0
          ) {
            for (let o = 0; o < this.list.length; o++) {
              for (let i = 0; i < this.experimentTemplateData.length; i++) {
                if (this.list[o].id === this.experimentTemplateData[i].id) {
                  this.$nextTick(function() {
                    this.$refs.tableData.toggleRowSelection(this.list[o], true);
                  });
                }
              }
            }
          }
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    changePage(page) {
      this.pagination.pageIndex = page;
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0 !important;
}
</style>
